<template>
  <section>
    <div class="header">
      <div class="dc">
        <img  v-if="listData.static_data" :src="listData.static_data.pic" alt />
        <div class="zg"></div>
      </div>

      <header>
        <p @click="back">&lt;</p>
        <p>演出详情</p>

        <p>
          <span class="iconfont icon-fenxiang" @click="share"></span>
        </p>
        <p>
          <router-link tag="span" :to="{path:'/main'}" class="iconfont icon-home"></router-link>
        </p>
      </header>
      <dl>
        <dt>
          <img v-if="listData.static_data" :src="listData.static_data.pic" alt />
        </dt>
        <dd>
          <h3 v-if="listData.static_data">{{listData.static_data.show_name}}</h3>
          <p v-if="listData.static_data">￥{{listData.static_data.price_range}}</p>
        </dd>
      </dl>
    </div>
    <div class="check">
      <div v-if="!listData.static_data">not data</div>
      <div v-else v-for="item in listData.static_data.support.list" :key="item">
        <span class="iconfont icon-xuanzhong"></span>
        <p>{{item}}</p>
      </div>
    </div>
    <div class="msg">
      <div>
        <h3 v-if="! listData.static_data"></h3>
        <h3
          v-else
          @click="start"
        >{{listData.static_data.show_time_data.show_time_start_display}} - {{listData.static_data.show_time_data.show_time_end_display}} &gt;</h3>
        <p
          v-if="listData.static_data"
        >{{listData.static_data.city.city_name}}| {{listData.static_data.venue.venue_name}}</p>
        <p v-if="listData.static_data">{{listData.static_data.venue.venue_address}}</p>
      </div>
      <div class="icon">
        <span class="iconfont icon-tubiaozhizuomoban"></span>
      </div>
    </div>
    <div class="vip">
      <div>
        <p>橙PLUS卡</p>
        <p>开通送￥100元 最高省58元</p>
        <p>立即开卡 &gt;</p>
      </div>
    </div>
    <div class="v1">
      <p>优 惠:</p>
      <p>V+</p>
      <p>V+专享活动，指定票价9折</p>
      <p @click="vip">···</p>
    </div>
    <div class="vip2">
      <p>VIP+:</p>
      <p>V+会员享</p>
      <p>国内免邮 双倍积分</p>
      <p>&gt;</p>
    </div>
    <div class="main">
      <p>入场</p>
      <p v-if="listData.static_data">{{listData.static_data.tips.desc}}</p>
    </div>
    <div class="city">
      <div class="tit">
        <h3>巡演城市</h3>
        <p>
          <span >22</span>场&gt;
        </p>
      </div>
      <van-swipe class="my-swipe" :width="100" :show-indicators="false" :loop="false">
          <van-swipe-item>
            <p>上海</p>
            <p>05/29-06/02</p>
          </van-swipe-item>
          <van-swipe-item>
                <p>上海</p>
                <p>05/29-06/02</p>
          </van-swipe-item>
          <van-swipe-item>
            <p>上海</p>
                <p>05/29-06/02</p>
          </van-swipe-item>
          <van-swipe-item>
            <p>上海</p>
                <p>05/29-06/02</p>
          </van-swipe-item>
          <van-swipe-item>
            <p>上海</p>
                <p>05/29-06/02</p>
          </van-swipe-item>
          <van-swipe-item>
            <p>上海</p>
                <p>05/29-06/02</p>
          </van-swipe-item>
          <van-swipe-item>
            <p>上海</p>
                <p>05/29-06/02</p>
          </van-swipe-item>
</van-swipe>
    </div>
    <div class="show">
      <div class="tit">
        <h3>演出介绍</h3>
      </div>
      <div class="det">
        <!-- 折叠显示内容 -->
        <div class="yc" v-if="isshow">
          <div v-if="listData.static_data" v-html="listData.static_data.important_note"></div>
          <div v-if="listData.static_data" v-html="listData.static_data.show_desc.desc"></div>
          <div class="btn" @click="btn">展示全部</div>
        </div>
        <div v-else class="xs" >
           <div v-if="listData.static_data" v-html="listData.static_data.important_note"></div>
            <div v-if="listData.static_data" v-html="listData.static_data.show_desc.desc"></div>
        </div>
      </div>
    </div>
    <div class="remind" @click="tx">
      <div class="tit">
        <h3>温馨提醒</h3>
        <p>&gt;</p>
      </div>
      <ul>
        <li v-if="! listData.static_data"></li>
        <li
          v-else
          v-for="(item,index) in listData.static_data.show_notice.list"
          :key="index"
        >{{item.title}}</li>
      </ul>
    </div>
    <div class="rec">
      <div class="tit">
        <h3>相关推荐</h3>
      </div>

      <dl>
        <dt>
          <img src="./2.jpg" alt />
        </dt>
        <dd>
          <h6>2020.12-12.20</h6>
          <p>[档期调整]聚成制作|白老汇爱情</p>
          <p>深圳 | 南山文体中心剧场大剧院</p>
          <div>
            <p>可选座</p>
            <p>电子票</p>
          </div>
          <p>
            <span>￥100</span>起
          </p>
        </dd>
      </dl>
      <dl>
        <dt>
          <img src="./2.jpg" alt />
        </dt>
        <dd>
          <h6>2020.12-12.20</h6>
          <p>[档期调整]聚成制作|白老汇爱情</p>
          <p>深圳 | 南山文体中心剧场大剧院</p>
          <div>
            <p>可选座</p>
            <p>电子票</p>
          </div>
          <p>
            <span>￥100</span>起
          </p>
        </dd>
      </dl>
      <dl>
        <dt>
          <img src="./2.jpg" alt />
        </dt>
        <dd>
          <h6>2020.12-12.20</h6>
          <p>[档期调整]聚成制作|白老汇爱情</p>
          <p>深圳 | 南山文体中心剧场大剧院</p>
          <div>
            <p>可选座</p>
            <p>电子票</p>
          </div>
          <p>
            <span>￥100</span>起
          </p>
        </dd>
      </dl>
    </div>
    <footer>
      <router-link  tag="div" class="kf" :to="{path:'/kf'}" >
        <span class="iconfont icon-ermai"></span>
        <p>客服</p>
      </router-link>
      <p @click="start">立即购买</p>
    </footer>
    <div v-if="fx" class="fx">
      <h6>
        使用浏览器的分享功能
        <br />把演出分享出去
      </h6>
      <p @click="zd">知道了</p>
    </div>

    <van-popup v-model="ttt" position="bottom" :style="{ height: '60%' }" class="time">
      <div class="tit">
        <h5>优惠信息</h5>
        <span @click="gb">×</span>
      </div>
      <div>
        <p>场次：2020.12.5 周六 14:00 9折</p>
        <p>票价：180.00 280.00 380.00 480.00 580.00</p>
      </div>
      <div>
        <p>场次：2020.12.5 周六 14:00 9折</p>
        <p>票价：180.00 280.00 380.00 480.00 580.00</p>
      </div>
      <div>
        <p>场次：2020.12.5 周六 14:00 9折</p>
        <p>票价：180.00 280.00 380.00 480.00 580.00</p>
      </div>
    </van-popup>
    <van-popup v-model="wxts" position="bottom" :style="{ height: '60%' }" class="time">
      <div class="tit">
        <h5>温馨提醒</h5>
        <span @click="close">×</span>
      </div>
      <div v-if="! listData.static_data"></div>
      <div v-else v-for="item in listData.static_data.show_notice.list" :key="item.index">
        <h3 class="title">{{item.title}}</h3>
        <p>{{item.desc}}</p>
      </div>
    </van-popup>
    <van-popup v-model="undet" position="bottom" :style="{ height: '70%' }" class="time">
      <div class="tit">
        <h5>选择场次</h5>
        <span @click="end">×</span>
      </div>
      <div v-if=" ! listData.item_list"></div>
      <div v-else v-for="(item,index) in listData.item_list" :key="item.index">
        <p
          :class="activeClass == index ? 'active':'' "
          class="data"
          @click="style(index)"
        >{{item.project_time}}</p>
      </div>
      <div class="tit">
        <h5>选择价格</h5>
      </div>
      <div>
        <p class="data active">100</p>
      </div>
      <div class="tit">
        <h5>选择张数</h5>
        <p>
          <button @click="jia">+</button>
          <span>{{num}}</span>
          <button @click="jian">-</button>
        </p>
      </div>
      <div class="tit">
        <h5>合计</h5>
        <p class="tot">{{num*100}}</p>
      </div>
      <div class="buy">
        <p style="color:#fff;font-size:0.36rem;text-align:center;line-height:1rem">立即购买</p>
      </div>
    </van-popup>
  </section>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { Swipe, SwipeItem } from 'vant';

import { Lazyload } from 'vant';

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Popup);
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 跳转首页地址
      main: "../../views/main.vue",
      // 跳转客服
      kf:'./kf.vue',
      // 分享
      fx: false,
      // vip显示模块
      ttt: false,
      // 温馨提醒
      wxts: false,
      // 开始结束时间
      undet: false,
      // active切换
      activeClass: -1,
      num: 1,
      // 展开
      isshow:true,
    };
  },
  mounted() {
    this.$store.dispatch("main/setShowBtoNav", false);
    
  },
  computed: {
    ...mapState("pre", ["listData"]),
  },
  methods: {
    // 返回上一页back按钮
    back() {
      this.$router.back(-1);
    },
    // 分享按钮
    share() {
      this.fx = true;
    },
    // 分享关闭
    zd() {
      this.fx = false;
    },
    // vip场次
    vip() {
      this.ttt = true;
    },
    // 关闭VIP场次
    gb() {
      this.ttt = false;
    },
    // 温馨提醒
    tx() {
      this.wxts = true;
    },
    // 温馨提醒关闭
    close() {
      this.wxts = false;
    },
    // 时间段显示
    start() {
      this.undet = true;
    },
    // 时间段关闭
    end() {
      this.undet = false;
    },
    // 日期active样式切换
    style(index) {
      this.activeClass = index;
    },
    // ++
    jia(num) {
      this.num++;
    },
    // --
    jian(num) {
      if (this.num > 1) {
        this.num--;
      }
    },
    // 展开全部
    btn(){
      this.isshow = false
    },
  },
};
</script>

<style >

.my-swipe .van-swipe-item {


    text-align: center;
    padding-top:0.3rem;

    width: 0.88rem;
  height: 1.16rem;
  border: 1px solid gray;
  margin-left: 0.24rem;
  
  }

.buy > p {
  width: 100%;
  height: 1rem;
  background: #f6603f;
  border-radius: 0.2rem;
}
.tit > .tot {
  font-size: 0.32rem;
  color: red;
}
.tit > p > span {
  margin: 0 0.1rem;
}
.tit > p > button {
  width: 0.5rem;
  height: 0.5rem;
}
.data.active {
  color: red;
}
.data {
  width: 3rem;
  height: 0.6rem;
  background: gray;
  margin: 0.3rem;
  background: #f5f5f5;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.28rem;
  float: left;
}
.title {
  padding-left: 0.3rem;
}
.time > .tit > h5 {
  font-size: 0.36rem;
}
.time > .tit > span {
  font-size: 0.5rem;
}
.time > div > p {
  padding-left: 0.3rem;
  color: gray;
  font-size: 0.28rem;
  line-height: 0.4rem;
}
.fx {
  width: 85%;
  height: 2.84rem;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.fx > h6 {
  width: 100%;
  height: 1.84rem;
  font-size: 0.37rem;
  text-align: center;
  padding-top: 0.5rem;
  color: #000;
}
.fx > p {
  width: 100%;
  font-size: 0.4rem;
  color: #ff6743;
  text-align: center;
  line-height: 1rem;
  border-top: 1px solid #000;
}
.header {
  width: 100%;
  height: 4.36rem;
  position: relative;
}
.dc {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.dc > img {
  width: 100%;
  height: 100%;
  filter: blur(5px);
}
.zg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  background: rgba(0, 0, 0, 0.5);
}
header {
  display: flex;
  width: 100%;
  height: 0.86rem;
  align-items: center;
  position: absolute;
  top: 0;
  justify-content: space-between;
  padding: 0 0.2rem;
}

header > p:nth-child(4) {
  width: 10%;
}
header > p {
  font-size: 0.32rem;
  color: #fff;
  font-weight: bolder;
}
header > p:nth-child(2) {
  width: 80%;
  text-align: center;
}
header > p > span {
  font-size: 0.32rem;
  margin-right: 0.3rem;
  color: #fff;
}
.header > dl {
  width: 100%;
  height: 3.16rem;
  position: absolute;
  top: 1rem;
  left: 0;
  padding: 0 0.2rem;
  display: flex;
}
.header > dl > dt {
  width: 2.2rem;
  height: 3rem;
}
.header > dl > dt > img {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
}
.header > dl > dd {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 4.5rem;
  height: 2.7rem;
  margin-left: 0.2rem;
  color: #fff;
}
.header > dl > dd > h3 {
  font-size: 0.32rem;
  padding-top: 0.12rem;
}
.header > dl > dd > p {
  font-size: 0.4rem;
}
.check {
  width: 100%;
  height: 0.83rem;
  padding: 0 0.3rem;
  display: flex;
}
.check > div {
  display: flex;
  margin-right: 0.3rem;
  align-items: center;
}
.check > div > span {
  color: #ff846d;
}
.msg {
  width: 100%;
  height: 2.12rem;
  padding: 0 0.3rem 0.43rem;
  display: flex;
  justify-content: space-between;
}
.msg > div > h3 {
  font-size: 0.34rem;
  font-weight: normal;
  margin-bottom: 0.3rem;
}
.msg > div > p {
  font-size: 0.32rem;
  line-height: 0.4rem;
}
.msg > div > p:nth-child(3) {
  font-size: 0.24rem;
  line-height: 0.8rem;
}
.msg > .icon > span {
  font-size: 0.5rem;
  display: block;
  margin-top: 0.86rem;
  background: #ebebeb;
  border-radius: 100%;
  color: #ec7438;
}
.vip {
  width: 100%;
  height: 1.21rem;
  padding: 0 0.3rem 0.33rem;
}
.vip > div {
  background: #343432;
  border-radius: 0.2rem;
  display: flex;
  height: 0.88rem;
  align-items: center;
  justify-content: space-around;
}
.vip > div > p:nth-child(1) {
  width: 1.12rem;
  height: 0.35rem;
  background: #f3de9f;
  font-size: 0.24rem;
  color: #150000;
}
.vip > div > p:nth-child(2),
.vip > div > p:nth-child(3) {
  font-size: 0.28rem;
  color: #fde092;
}
.v1,
.vip2 {
  width: 100%;
  height: 0.94rem;
  padding: 0.23rem 0.3rem;
  display: flex;
  align-items: center;
}
.v1 > p:nth-child(1),
.vip2 > p:nth-child(1),
.main > p:nth-child(1) {
  font-size: 0.28rem;
  color: #b4b3b3;
  width: 0.9rem;
  height: 0.48rem;
  margin-right: 0.2rem;
  line-height: 0.48rem;
}
.v1 > p:nth-child(2) {
  color: #f06021;
  width: 0.48rem;
  height: 0.31rem;
  border: 1px solid #f06021;
  text-align: center;
  line-height: 0.31rem;
  margin-right: 0.2rem;
}
.v1 > p:nth-child(3),
.vip2 > p:nth-child(3) {
  width: 6rem;
  height: 0.48rem;
  line-height: 0.48rem;
}
.v1 > p:nth-child(4),
.vip2 > p:nth-child(4) {
  font-size: 0.4rem;
}
.vip2 > p:nth-child(3) {
  width: 4.5rem;
  padding-left: 0.2rem;
  color: #f06021;
  font-size: 0.28rem;
}
.main {
  width: 100%;
  height: 1.3rem;
  padding: 0.23rem 0.3rem;
  display: flex;
}
footer {
  width: 100%;
  height: 1.06rem;
  border-top: 0.01rem solid #000;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  background: #fff;
}
footer > div {
  width: 1.02rem;
  height: 0.72rem;
  text-align: center;
  font-size: 0.24rem;
}
footer > .kf > span {
  font-size: 0.5rem;
}
footer > p {
  width: 6.2rem;
  height: 0.8rem;
  background: #f6603f;
  border-radius: 0.2rem;
  font-size: 0.36rem;
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 0.8rem;
}

.tit {
  width: 6.9rem;
  height: 1.1rem;
  display: flex;
  margin: 0 0.3rem;
  align-items: center;
  justify-content: space-between;
}
.tit > h3,
.tit > p {
  font-size: 0.38rem;
}
.tit > p > span {
  color: #f06021;
}



.show {
  width: 100%;
}
.det > div {
  width: 6.9rem;
  margin: 0 0.3rem;
  position: relative;
}
.btn {
  width: 100%;
  height: 0.78rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0; /* 正序堆叠，覆盖在p元素上方 */
  text-align: center;
  background: linear-gradient(rgba(233, 236, 239, 0.5), white);
  font-size: 0.38rem;
  color: #f06021;
}
.remind > ul {
  display: flex;
  width: 6.9rem;
  height: 0.62rem;
  justify-content: space-around;
}
.remind > ul > li {
  color: gray;
  font-size: 0.26rem;
}
.rec {
  width: 100%;
  margin-bottom: 1.5rem;
}
.rec > dl {
  width: 6.9rem;
  height: 3.46rem;
  margin: 0 0.3rem;
  display: flex;
}
.rec > dl > dt {
  width: 2.1rem;
  height: 2.88rem;
}
.rec > dl > dt > img {
  width: 100%;
  height: 100%;
}
.rec > dl > dd {
  width: 4.5rem;
  height: 2.88rem;
  margin-left: 0.3rem;
}
.rec > dl > dd > h6 {
  font-size: 0.32rem;
}
.rec > dl > dd > p:nth-child(2) {
  width: 4.5rem;
  height: 0.92rem;
  font-size: 0.36rem;
  color: #232323;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec > dl > dd > p:nth-child(3) {
  font-size: 0.24rem;
}
.rec > dl > dd > div {
  display: flex;
}
.rec > dl > dd > div > p {
  color: #f06021;
  padding-right: 0.1rem;
  padding-top: 0.3rem;
}
.rec > dl > dd > p:last-child {
  padding-top: 0.25rem;
}
.rec > dl > dd > p:last-child > span {
  color: #f06021;
  font-size: 0.32rem;
  padding-right: 0.1rem;
}
.yc {
  width: 100%;
  height: 15rem;
  overflow: hidden;
}
.yc > div > p > img, 
.xs > div > p > img {
  width: 6.9rem;
  height: 3.6rem;
}
.xs {
  width: 6.5rem;
}
</style>
